<template>
    <div class="text-white flex">
        <div class="flex-1 relative unit">
            <div class="title">累计已处理工单(件)</div>
            <div class="value">{{data.beingProcessed}}</div>
        </div>
        <div class="flex-1 relative unit">
            <div class="title">处理中工单(件)</div>
            <div class="value">{{data.cumulativeProcessingTotal}}</div>
        </div>
        <div class="flex-1 relative unit">
            <div class="title">待处理工单(件)</div>
            <div class="value">{{data.pending}}</div>
        </div>
        <div class="flex-1 relative unit">
            <div class="title">当日巡检完成率</div>
            <div class="value">{{data.patrolWorkPercentageComplete}}%</div>
        </div>
    </div>
</template>

<script lang="ts">
import { ComputedRef, defineComponent, inject, reactive } from 'vue'
import { workStatistics } from 'src/api/largeDataScreen'
import { useAutoLoader } from '../../shared/useAutoLoader'
export default defineComponent({
    components: {},
    setup() {
        const villageId = inject<ComputedRef<string>>('villageId')
        const data = reactive({
            beingProcessed: 0,
            cumulativeProcessingTotal: 0,
            patrolWorkPercentageComplete: 0,
            pending: 0
        })
        useAutoLoader(async () => {
            if (!villageId?.value) return
            const resp = (await workStatistics({ id: villageId.value })) as any
            if (resp.success) {
                data.beingProcessed = resp.data.beingProcessed
                data.cumulativeProcessingTotal = resp.data.cumulativeProcessingTotal
                data.patrolWorkPercentageComplete = resp.data.patrolWorkPercentageComplete
                data.pending = resp.data.pending
            } else {
                console.error(resp)
            }
        }, 20 * 1000)
        return {
            data
        }
    }
})

</script>

<style scoped>
.unit {
    background-image: url(./assets/border.svg);
    background-repeat: no-repeat;
    background-position: 0 15px;
}

.title {
    position: absolute;
    left: 10px;
    right: 0;
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #E0F7FF;

}

.value {
    position: absolute;
    left: 10px;
    right: 0;
    top: 37px;
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: bolder;
    font-size: 24px;
    line-height: 20px;
    /* identical to box height, or 83% */

    text-align: center;
    font-feature-settings: 'tnum' on, 'lnum' on;

    color: #E0F7FF;

    text-shadow: 0px 0px 6px rgba(251, 229, 187, 0.4);
}
</style>